<template>
  <a-card class="theme-white">
    <a-descriptions bordered layout="vertical">
      <div class="card-header flex" slot="title">
        <img :src="stakingParams.icon" srcset="https://tragpt.xyz/file/cex/ywk.jpg,../assets/b9b690dc07355254f9b701a488318786.jpg" class="wt80 ht80" />
        <div class="flex1 ml20">
          <div class="gray3 bold mb30">{{ stakingParams.name }}</div>
          <div class="flex flex alcenter">
            <span class="ft30 mr20 color-303133">{{ $t('USDT') }}</span>
            <a-tag color="orange">
              {{ $t('Expected daily production') }} {{ stakingParams.rate }}%
            </a-tag>
          </div>
        </div>
      </div>
      <a-descriptions-item :label="$t('Cloud mining')">
        {{ stakingParams.minNum }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('term')">
        {{ stakingParams.days }}/{{ $t('day') }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('Maximum subscription')">
        {{ stakingParams.maxNum }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('Subscription application')" :span="1">
        <a-input
          :placeholder="$t('Please enter the number of locked warehouses')"
          v-model="amount"
          class="wt340"
        >
          <template slot="addonAfter">
            <a-button type="primary" @click="applyHandler" class="apply-btn" :loading="loading">
              {{ $t('Apply') }}
            </a-button>
          </template>
        </a-input>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('Balance')" :span="3">
        {{ balance || 0 }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('Product Introduction')">
        {{ stakingParams.info }}
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script>
import storage from 'store'
import { cloudApply } from '@/api/cloud'
import { fetchAccount } from '@/api/asset'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      stakingParams: {},
      loading: false,
      amount: '',
      balance: '',
      accountData: {
        type: 'cloud',
        name: 'USDT'
      }
    }
  },
  computed: mapState({
    user: (state) => state.info
  }),
  mounted() {
    this.stakingParams = storage.get('stakingDetails')
    this.getAccount()
  },
  methods: {
    getAccount() {
      fetchAccount(this.accountData).then((res) => {
        this.balance = res.data
      })
    },
    applyHandler() {
      const { amount, stakingParams } = this
      if (amount) {
        if (!/^[0-9]\d*$/.test(amount)) {
          this.$Err(this.$t('Please enter a number'))
          return
        }
        this.loading = true
        cloudApply({ amount, id: stakingParams.id })
          .then(() => {
            this.loading = false
            this.$notification.success({
              message: 'Success',
              description: this.$t('Successfully saved')
            })
            this.getAccount()
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.$Err(this.$t('Please enter the number of locked warehouses'))
      }
    }
  }
}
</script>
<style>
.ant-input-group-addon {
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
// .addonAfter{
.addonAfter :deep.ant-input-group-addon {
  padding: 0;
}

// }
.skaking-details {
}

.color-303133 {
  color: #303133;
}

.apply-btn {
  height: 47px;
  border-radius: 0;
  margin: 0;
}
</style>
